Tiny File Manager | hub_webcnt

Back Back Up Advanced Editor

<?php
//======================================================================================
//
// Function: List data
//
// Programmer: JKJ
// Date      : 2020-06-29
//
// Copyright Reeft A/S (c) - 2020
//======================================================================================
//
// http://www.openjs.com/scripts/events/keyboard_shortcuts/
// https://htmlcolorcodes.com/color-names/
// http://www.tl-it.nl/docs/files/jqplot-core-js.html#Series.yaxis
// http://www.jqplot.com/docs/files/jqplot-core-js.html
//
//
// Chart.js
// https://www.chartjs.org/docs/latest/axes/styling.html?h=grid
// https://jsfiddle.net/crabbly/kL68ey5z/ -- PDF save
// https://github.com/emn178/chartjs-plugin-labels - text on pie
// https://emn178.github.io/chartjs-plugin-labels/samples/demo/
//
// https://stackoverflow.com/questions/34479079/how-do-i-find-last-monday-using-momentjs
//
//======================================================================================
// General config
//======================================================================================
	include "config/config.php";

//======================================================================================
// Get input
//======================================================================================

if (isset($_REQUEST["fromdate"]))  				$fromDate 				= $_REQUEST["fromdate"];
	else $fromDate = 0;

if (isset($_REQUEST["todate"]))  				$toDate 				= $_REQUEST["todate"];
	else $toDate = 0;

if (isset($_REQUEST["input_hub_sertyp"]))  		$input_hub_sertyp 	= $_REQUEST["input_hub_sertyp"];
	else {
		$input_hub_sertyp = '';
	}

//======================================================================================
// Check input
//======================================================================================

//======================================================================================
// Set header texts
//======================================================================================

//======================================================================================
// Check if user is logged in?
//======================================================================================
	include "login_check.php";

//======================================================================================
// Get session variables
//======================================================================================
	include "include/getsession.php";

$datahub_text0108  = 'Jan';

//======================================================================================
// Set language
//======================================================================================
	include "include/set_language.php";

// Make kl lowercase
	$datahub_text0108_lower = strtolower($datahub_text0108);

//======================================================================================
// Set defaults
//======================================================================================

?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title><?php echo $datahub_text0001 ?></title>

<link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">

<script src="javascript/moment-with-locales.min.js"></script>
	<script src="javascript/moment-duration-format.min.js"></script>

<style>

.image-style-custom
{
	filter: drop-shadow(6px 6px 5px black)
}

.dropdown-item.active {
	background-color: ForestGreen;
}

.btn-custom-wide {
	height:60px;
	width:210px;
}

.small-text {
	font-size: 8px;
}

</style>

//=============================================================================
// Globals
//=============================================================================

$(function () {
	  $.scrollUp({
		scrollName: 'scrollUp', // Element ID
		//topDistance: '1800', // Distance from top before showing element (px)
		//topSpeed: 300, // Speed back to top (ms)
		scrollDistance: '300', // Distance from top before showing element (px)
		scrollSpeed: 300, // Speed back to top (ms)
		animation: 'fade', // Fade, slide, none
		animationInSpeed: 200, // Animation in speed (ms)
		animationOutSpeed: 200, // Animation out speed (ms)
		scrollText: false, //'Scroll to top', // Text for element
		activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
	  });
	});

load = 0;

//-----------------------------------------------------------------------------------------
	// Input params
	//-----------------------------------------------------------------------------------------
	var global_fromDate	 					= '<?php echo $fromDate ?>';
	var global_toDate	 					= '<?php echo $toDate ?>';

var global_sertyp						= '<?php echo $input_hub_sertyp ?>'

if ( global_sertyp == '' ) {
		global_sertyp = '*ALL';
	}

//-----------------------------------------------------------------------------------------

//=============================================================================
	// Misc chart setup
	//=============================================================================
	var	DFT_DISPLAY_PARETO_ON_BAR_CHART 					= 'N';
	var	DFT_DISPLAY_PARETO_ON_BAR_CHART 					= 'Y';

var	DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME 	= 'Y';
	var	DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART 	= 'Y';

if  ( DFT_DISPLAY_PARETO_ON_BAR_CHART == 'Y' ) {
		var displayPareto = true;
	} else {
		var displayPareto = false;
	}

if  ( DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART == 'Y' ) {
		var dftDisplayLablesOnParetoChartOnBarChart = true;
	} else {
		var dftDisplayLablesOnParetoChartOnBarChart = false;
	}

if  ( DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME == 'Y' ) {
		var dftDisplayTicksOnRightSideBarChartForTime = true;
	} else {
		var dftDisplayTicksOnRightSideBarChartForTime = false;
	}

//-----------------------------------------------------------------------------------------
	// Reset chart objects
	//-----------------------------------------------------------------------------------------
	var chart_bar 		= null;
	var chartPDFname 	= null;

//-----------------------------------------------------------------------------------------
	// Move PHP arrays to javascript
	//-----------------------------------------------------------------------------------------
	var DFT_CANVAS_HEIGHT				= '<?php echo $DFT_CANVAS_HEIGHT; ?>';

var DFT_DURATIONTIME				= <?php echo $DFT_DURATIONTIME; ?>;
	var DFT_PIE_TITLE_HEADER_DISPLAY	= '<?php echo $DFT_PIE_TITLE_HEADER_DISPLAY; ?>';
	var DFT_LEGEND_POSITION_DISPLAY		= '<?php echo $DFT_LEGEND_POSITION_DISPLAY; ?>';
	var DFT_LEGEND_POSITION				= '<?php echo $DFT_LEGEND_POSITION; ?>';

//-----------------------------------------------------------------------------------------
	// Msic chart setup
	//-----------------------------------------------------------------------------------------

var globalbarData  			= null;
	var globalbarData1 			= null;
	var globalbarColor 			= null;
	var globalbarLabelText 		= null;

//-----------------------------------------------------------------------------------------
	// General chart settings - also look in .ready for more settings and hiding
	//-----------------------------------------------------------------------------------------

durationTime = 2000;
	pie_title_header_display = true;
	legend_position			 = 'top';
	legend_position_display	 = true;

//-----------------------------------------------------------------------------------------

var pieData = null;
	var pieColor = null;
	var pieToolTip = null;
	var maxValueBar = 0;

//=============================================================================
// Get data for reason
//=============================================================================
function processReasonData()
{

fromDate = '<?php echo $fromDate ?>';
	toDate = '<?php echo $toDate ?>';

bar_title_headerText = '<?php echo $datahub_text0218 ?>';
	maxValueBarAdjust = 10;
	maxValueBarAdjustMobile = 5;
	pointLabelsShow = false;
	barLabelText = '<?php echo $datahub_text0155 ?>';
	yAxesDisplay = false;
	gridLinesDisplay = false;
	chartPDFname = 'webservice_usage.pdf';

// Set bar header
	bar_title_header = bar_title_headerText ;

var search_arg 	= $('#input-HUB_SERTYP').val();
	var hub_sertyp 	= $('#input-HUB_SERTYP').val();

var searchBy	= 'SERTYP';

if ( search_arg == '*ALL' ) {
		var search_arg 	= '';
		var searchBy	= '';
		var hub_sertyp 	= '';
	}

// Create param list
	parmData = 'hub_WEBNAM='  + ''
			 + '&myPageGoTo=' + '0'
			 + '&myOffSet='   + '0'
			 + '&myPageSize=' + '500'
			 + '&hub_sertyp=' + hub_sertyp
			 + '&search_arg=' + search_arg
			 + '&callType='	  + '*CHART'
			 + '&orderBy='    + '2'
			 + '&searchBy='   + searchBy
			 ;

$.ajax({
		url: "HUB_WEBCNT_maintain_get.php",
		type: "GET",
		data: parmData,
		dataType: "json",
		cache: false,
	beforeSend: function( xhr ) {

}
	})
	.done(function( jsonData ) {

var returnCode 				= jsonData.header.returnCode;

// Define arrays
		arr 		= [];
		arr1 		= [];
		arr2 		= [];
		arrColor 	= [];
		arrToolTip 	= [];

total_HUB_COUNT	= 0;

myID = '';
		c = 0;
		default_color = '';
		var myID = 'all-button-detail';

var headerText01 = '<?php echo $datahub_text0147 ?>';
		var headerText02 = '<?php echo $datahub_text0148 ?>';

// Reset
		HTMLline02 = '<table id="REEFTvisual_data" class="table table-bordered table-striped table-hover">';

HTMLline02  +=	'<thead>'
					+ 	'<tr class="bg-primary text-white font-weight-bold text-left">'
					+	'<th>'
					+	'<?php echo $datahub_text0178 ?>'
					+	'</th>'
					+	'<th>'
					+	headerText01
					+	'</th>'
					+	'<th>'
					+	headerText02
					+	'</th>'
					+	'<th class="text-left">'
					+	'</th>'
					+	'</tr>'
					+	'</thead>'
					+	'<tbody>'
					;

// Get what to show
		current_HUB_SERTYP = $('#input-HUB_SERTYP').val();

var myCMPNO				= jsonData.header.myCMPNO;
				var myCMPNO_Name		= jsonData.header.myCMPNO_Name;
				var myFile_name			= jsonData.header.myFile_name
				var myFile_description	= jsonData.header.myFile_description

var returnCode 			= jsonData.header.returnCode;
				var returnMsg 			= jsonData.header.returnMsg;
				var entries_found 		= jsonData.header.entries_found;
				var response_sec 		= jsonData.header.response_sec;

var myTotalRecordsFound = jsonData.header.myTotalRecordsFound;
				var myTotalPages 		= jsonData.header.myTotalPages;
				var myPageSize 			= jsonData.header.myPageSize;

// Response time
				$('#response-time-text').html( 'Response time: ' + response_sec ).css('font-size','0.8em');

// Set Company and file information
				if ( myCMPNO != '' ) {
					$('#data-hub-company-information').html( '<span title="' + myFile_name + ' - ' + myFile_description + '">' + myCMPNO_Name + ' (' + myCMPNO + ')' + '</span>' ).css('font-size','1.3em');
				}

// Create header buttons

var HTMLlineButtons 		= '';
				var selectedButtonClass 	= 'btn-dark';

$.each( jsonData.header_buttons, function( index, object ){

var buttonLine   = object.buttonLine;
					var buttonCount  = object.buttonCount;
					var buttonPages  = object.buttonPages;

var save_buttonLine = buttonLine;

if ( buttonLine == '*NONE' ) {
						buttonLine = 'No type';
					}

var selectButtonLineID 		= 'select-button-line-id-' + buttonLine;

HTMLlineButtons 		+=	'<button title="Search for..." type="button" style="cursor:default" id="' + selectButtonLineID + '" class="btn ' + selectedButtonClass + ' select-button-line btn-sm mr-1 mb-1" onclick="setSearchWord(\'' + save_buttonLine + '\',\'' + '0' + '\',\'' + '' + '\',\'' + buttonPages + '\',\'' + buttonCount + '\')">'
											+ 	' <b>' + buttonLine + '</b>' + ' (' + buttonCount + ')'
											+	'</button>'

});

var selectButtonLineID 		= 'select-button-line-id-' + 'reset' + '_';

HTMLlineButtons 		+=	'<button title="Search for..." type="button" style="cursor:default" id="' + selectButtonLineID + '" class="btn ' + selectedButtonClass + ' select-button-line btn-sm mr-1 mb-1" onclick="setSearchWord(\'' + '*ALL' + '\',\'' + '0' + '\',\'' + '' + '\',\'' + '0' + '\',\'' + '0' + '\')">'
											+	'Show all'
											+	'</button>'

$('#data-result-button-lines').html(HTMLlineButtons);

$.each( jsonData.pareto, function( index, object ){

if ( $('#input-HUB_SERTYP').val() == '*ALL' ) {
			current_HUB_SERTYP = object.HUB_SERTYP;
		}

if ( current_HUB_SERTYP == object.HUB_SERTYP ) {

var chart_HUB_COUNT				= object.HUB_COUNT;
			var chart_HUB_SERTYP			= object.HUB_SERTYP;

var key_HUB_WEBNAM				= object.HUB_WEBNAM;

// Reason code data
			var chart_HUB_WEBNAM			= object.HUB_WEBNAM;
			var default_color				= object.HUB_CHRCOL;
			var char_HUB_CHRTXT				= object.HUB_CHRTXT	;

var total_chart_HUB_COUNT		= object.HUB_COUNT;
			var calc_sum					= object.calc_sum;
			var pareto_par					= object.calc_par;
			var pareto_pct					= object.calc_pct;

//			console.log(chart_HUB_COUNT + ' ' + chart_HUB_SERTYP + ' ' + pareto_pct + ' ' );

// Just in case
					if ( default_color == '' ) {
						default_color = 'tomato';
//						console.log('Default color added...')
					}

if ( displayPareto == false ) {
						var pareto_pct = -1000;
					}

var color = default_color;

// Set array
					arr.push(parseInt(chart_HUB_COUNT));

if ( char_HUB_CHRTXT != '' ) {
						chart_HUB_WEBNAM = char_HUB_CHRTXT;
					}

arr1.push(chart_HUB_WEBNAM + ' (' + chart_HUB_COUNT + ')' );
					arr2.push(parseFloat(pareto_pct));

arrColor.push(color);
					arrToolTip.push('none');

// Total
					total_HUB_COUNT = parseInt(total_HUB_COUNT) + parseInt(chart_HUB_COUNT); // Add to total

// Button id
					c++;
					myID = 'trans-button-' + c;

HTMLline02 +=	'<tr>'
							   +	'<td class="text-left">'
							   +	chart_HUB_WEBNAM
							   +	'</td>'
							   +	'<td class="text-center">'
							   +	chart_HUB_COUNT
							   +	'</td>'
							   +	'<td class="text-center">'
							   +	chart_HUB_SERTYP
							   +	'</td>'
							   +	'<td class="text-left">'
							   +	'<button class="btn btn-primary trans-button-list line-trans-button-list" id="' + myID + '" onclick="showTranscations(\'' + chart_HUB_WEBNAM + '\'' + ',\'' + chart_HUB_WEBNAM + '\'' + ',\'' + myID + '\')">' + '<?php echo $datahub_button_show_details ?>' + '</button>'
							   +	'</td>'
							   +	'</tr>'
							   ;

}

});

HTMLline02 +=	'</tbody>'
				   +	'<tfooter>'
				   +	'<tr class="bg-primary text-white">'
				   +	'<td class="text-left font-weight-bold">'
				   +	'Total'
				   +	'</td>'
				   +	'<td class="text-center font-weight-bold">'
				   +	total_HUB_COUNT
				   +	'</td>'
				   +	'<td class="text-center font-weight-bold">'
				   +	'</td>'
				   +	'<td class="text-center font-weight-bold">'
				   +	''
				   +	'</td>'
				   +	'</tr>'
				   ;

HTMLline02  +=	'</tfooter>'
					+	'</table>'

// Show yourself to the world, you little fvcker
		$('#data-result').html(HTMLline02);

setDataTablesReason();

maxValueBar = Math.max.apply(Math,arr);
		maxValueBar = parseInt(maxValueBar) + 1;

// Create chart
		barData = arr;
		barData1 = arr1;
		barData2 = arr2;
		barColor = arrColor;
		barToolTip = arrToolTip;

// Save for update data
		globalbarData  		= barData;
		globalbarData1 		= barData1;
		globalbarData2 		= barData2;
		globalbarColor 		= barColor;
		globalbarLabelText 	= barLabelText;

maxValueBar = Math.max.apply(Math,barData) + maxValueBarAdjustMobile;

// Reset messasge area
		$('#canvas-wrapper-message').html('');

// Create chart
		createChart_reason_bar();

})
	.always(function( jsonData ) {

//console.log('I am always..');

})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( xhr );

});

}

//=============================================================================
// Create chart - reason code
//=============================================================================
function createChart_reason_bar() {

$('#downloadPdf').removeClass('d-none');
	maxRotationValue = 75;  // No rotate
	minRotationValue = 75;

renderText = '#000';
	renderText = '#fff';

var color = barColor;
		var barChartData = {
			labels: barData1,
			datasets: [
			{
				label: barLabelText,
				backgroundColor: barColor,
				borderWidth: 1,
				data: barData
			}
			]
		};

// Setup the chart (make sure config is global)
    //const config = {
    config = {
      data: {
		labels: barData1,
		datasets:
		[{
			yAxisID: 'y1',
			label: '<?php echo $datahub_text0147 ?>',
			type: 'bar',
			data: barData,
			backgroundColor: barColor,
			borderWidth: 1,
			order: 10,
			barPercentage: 0.8,
			categoryPercentage: 0.8,
		datalabels: {
				display: false,
		}
		},
		{
				yAxisID: 'y2',
				type: 'line',
				label: 'Pct',
				data: barData2,
				borderColor: '#2B6699',
				order: 5,
				cubicInterpolationMode: 'monotone',
				tension: 0.4,
			datalabels: {
				display: dftDisplayLablesOnParetoChartOnBarChart,
				backgroundColor: '#2B6699',
				borderColor: '#000',
				borderWidth: 1,
				borderRadius: 4,
				color: 'white',
				font: {
				  weight: 'bold'
				},
				//formatter: Math.round,
				padding: 4,
				formatter: function(value, context) {
					let new_value = value.toFixed(0) + '%';
					return new_value;
				}
			},
       }
	  ]},
		options: {
		responsive: true,
		maintainAspectRatio: false,
		plugins: {
			tooltip: {
						enabled: true,
						yPadding: 10,
						xPadding: 10,
						backgroundColor: '#000',
						titleFontColor: '#000',
						bodyFontColor: '#000',
						borderColor: '#ccc',
						borderWidth: 2,
						position: 'nearest',
						callbacks: {
                        label: function(tooltipItem) {

if (tooltipItem.datasetIndex === 0) {

// Tooltip for the bar dataset
								return "<?php echo $datahub_text0147 ?>: " + tooltipItem.raw;
							}
							else if (tooltipItem.datasetIndex === 1) {
								// Tooltip for the line dataset
								return 'Percentage: ' + tooltipItem.raw + '%';
							}

},
                    }
					},
		  // Change options for ALL labels of THIS CHART
				 legend:
					 {
						 display: false,
						 position: 'bottom',
					 },

title: {
						 display: true,
						 text: bar_title_header,
						 font: {
							 size: 40,
						 }
					 },
				  labels: {
					 display: true,
					 render: 'value',
					 fontSize: 14,
					 fontStyle: 'bold',
					 fontColor: renderText,
					 }
				 },
		scales:	{
			y1: {
				type: 'linear',
				position: 'left',
				beginAtZero: true,
				title: {
					display: true,
					text: '<?php echo $datahub_text0147 ?>'
				},
				ticks: {
					display: dftDisplayTicksOnRightSideBarChartForTime,
					beginAtZero: false,
					fontColor: '#ffbaa2',
				},
				grid: {
					display: false
				}

},
			 y2: {
				 display: displayPareto,
				 type: 'linear',
				 position: 'right',
				 min: 0,
				 max: 100,
				 ticks: {
						  beginAtZero: true,
		                  stepSize: 10,
						  fontColor: '#ffbaa2',
						  callback: function(value, index, values) {
							return value + ' %';
						  }
						  },
				title: {
					display: true,
					text: 'Pareto %'
				}
				},
				xAxes:
					{
						ticks:
						{
						autoSkip: false,
						maxRotation: 30,
						minRotation: 25
						}
					}
			}
		 }
		};

// Render init block
	var ctx = document.getElementById('show-chart-here').getContext('2d');
	chart_bar = new Chart(ctx,config);

// Hide Pareto chart
	toggleParetoVisibility(false)

}

//=============================================================================
// Show / hide pareto
//=============================================================================
function toggleParetoVisibility(showPareto) {

if (!showPareto) {

// Hide the y2 scale and dataset
        config.options.scales.y2.display = false;
        config.data.datasets = config.data.datasets.filter(dataset => dataset.yAxisID !== 'y2');

// Hide button
		$('#hide-pareto-button').addClass('d-none');
		$('#show-pareto-button').removeClass('d-none');

} else {

// Hide button
		$('#hide-pareto-button').removeClass('d-none');
		$('#show-pareto-button').addClass('d-none');

// Show the y2 scale and dataset
        config.options.scales.y2.display = true;

// Re-add the y2 dataset if it was removed
        if (!config.data.datasets.find(dataset => dataset.yAxisID === 'y2')) {
            config.data.datasets.push({
                yAxisID: 'y2',
                type: 'line',
                label: 'Pct',
                data: barData2,
                borderColor: '#2B6699',
                order: 5,
                cubicInterpolationMode: 'monotone',
                tension: 0.4,
                datalabels: {
                    display: dftDisplayLablesOnParetoChartOnBarChart,
                    backgroundColor: '#2B6699',
                    borderColor: '#000',
                    borderWidth: 1,
                    borderRadius: 4,
                    color: 'white',
                    font: { weight: 'bold' },
                    padding: 4,
                    formatter: function (value, context) {
                        return value.toFixed(0) + '%';
                    }
                }
            });
        }
    }

// Update the chart
    chart_bar.update();
}

//=============================================================================
// Set datatables
//=============================================================================
function setDataTablesReason()
{

$('#REEFTvisual_data').DataTable({
        "responsive": true,
		"fixedHeader": false,
		"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
		"iDisplayLength": 25,
        "processing": true,
		"dom": '<"toolbar">lfi<bottom>Bp<"clear">',
        "order": [[ 1, "desc" ]],
		"columnDefs": [
				{
				"targets": [ 3 ],
				"visible": true,
				"searchable": false,
				 "orderable": false
				}

],
		"language":
		{

"sProcessing":   "<?php echo $datahub_datatable_Processing ?>",
					"sLengthMenu":   "<?php echo $datahub_datatable_LengthMenu ?>",
					"sZeroRecords":  "<?php echo $datahub_datatable_ZeroRecords ?>",
					"sInfo":         "<?php echo $datahub_datatable_Info ?>",
					"sInfoEmpty":    "<?php echo $datahub_datatable_InfoEmpty ?>",
					"sInfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
					"sInfoPostFix":  "<?php echo $datahub_datatable_InfoPostFix ?>",
					"sLoadingRecords": "<?php echo $datahub_datatable_Processing ?>",
					"sSearch":       "<?php echo $datahub_datatable_Search ?>",
					"sUrl":          "<?php echo $datahub_datatable_Url ?>",
					"oPaginate": {
						"sFirst":    "<?php echo $datahub_datatable_First ?>",
						"sPrevious": "<?php echo $datahub_datatable_Previous ?>",
						"sNext":     "<?php echo $datahub_datatable_Next ?>",
						"sLast":     "<?php echo $datahub_datatable_Last ?>"
					}
		},
        "rowCallback": function(row, data, index)
		{

},
        "preDrawCallback": function(settings)
		{
		},
		"initComplete": function ()
		{

},
		"buttons": 	[
					{
						title: 'REEFTvisual_data_PDF',
						extend: 'pdf',
						text: '<img src="images/pdf_logo.png" height="25"> PDF',
						orientation: 'landscape',
						exportOptions: {
						modifier: {
							page: 'all'
							}
						}
					},
					{
						title: 'REEFTvisual_data_Excel',
						extend: 'excel',
						text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel'
						},
						{
						extend: 'copy',
						text: '<img src="images/copy.png" height="25"> Copy to Clipboard'
						}
					]
    });

// Set header

$('#REEFTvisual_data').append('<caption style="caption-side: top"><div class="text-center font-weight-bold">' + bar_title_header + '</div></caption>');

}

//=============================================================================
// Log off
//=============================================================================
function signoff()
{

window.location.href = "logout.php";

}

//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{

window.location.href = url;

}

//=============================================================================
// Set default date
//=============================================================================
function setDefaultDate( defaultHours ) {

// Set default from/to date
	default_fromDate 	= moment().subtract(defaultHours, 'hours').format("YYYY-MM-DD HH:mm");

$('#fromdate').datetimepicker('date', default_fromDate );
	$('#fromdateX').addClass('animated pulse border border-danger rounded');

// After animation
	$('#fromdateX').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',

function() {
				$('#fromdateX').removeClass( 'animated pulse border border-danger rounded' );
		}

);

default_toDate 	= moment().add(0, 'days').add(10, 'minutes').subtract(0, 'year').format("YYYY-MM-DD HH:mm");
	$('#todate').datetimepicker('date', default_toDate );

$('#fromdate').datetimepicker('date', default_fromDate );
	$('#fromdateX').addClass('animated pulse border border-danger rounded');

$('#todate').datetimepicker('date', default_toDate );

}

//=============================================================================
// Scroll to something
//=============================================================================
function scrollToSomething( target )
{

thisID = '#' + target;
	$.scrollTo( thisID, 1000);

}

//=============================================================================
// Create PDF
//=============================================================================
function downloadPDF() {

// Get size of report page
	var reportPageHeight = $('#canvas-wrapper').innerHeight();
	var reportPageWidth = $('#canvas-wrapper').innerWidth();

// Create a new canvas object that we will populate with all other canvas objects
	var pdfCanvas = $('<canvas />').attr({
		id: "canvaspdf",
		width: reportPageWidth,
		height: reportPageHeight
	});

// Keep track canvas position
	var pdfctx = $(pdfCanvas)[0].getContext('2d');
	var pdfctxX = 0;
	var pdfctxY = 0;
	var buffer = 100;

// For each chart.js chart
	$("canvas").each(function(index) {

// Get the chart height/width
		var canvasHeight = $(this).innerHeight();
		var canvasWidth = $(this).innerWidth();

// Draw the chart into the new canvas
		pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
		pdfctxX += canvasWidth + buffer;

// Our report page is in a grid pattern so replicate that in the new canvas
		if (index % 2 === 1) {
			pdfctxX = 0;
			pdfctxY += canvasHeight + buffer;
		}

});

// Create new pdf and add our new canvas as an image
	var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
	pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);

// download the pdf
	pdf.save(chartPDFname);

}

//=============================================================================
// Make first letter uppercase
//=============================================================================
function capitalizeFirstLetter(string) {

return string.charAt(0).toUpperCase() + string.slice(1);

}

//=============================================================================
// Reset messasge
//=============================================================================
function resetMessage()
{

$('#message-text').html('').removeClass('border border-danger rounded font-weight-bold mt-2 mb-1 p-2');

}

//=============================================================================
// Full screen popup
//=============================================================================
function popUpCenter(url, p1, p2, p3)
{

var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

if ( parseInt(v1_w) > 1800 ) {
		v1_w = 1800;
		v1_h = v1_h - 200;
		v1_center = v1_w/0.8;
	}

// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

var winname = 'win_' + url;

params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// screen popup - center - bigger
//=============================================================================
function popUpCenterBig(url, p1, p2, p3)
{

var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

// Get 25%
	v1_w_pct = v1_w * 0.18;

v1_w_new = v1_w - v1_w_pct;

if ( v1_w_new < 1 ) {
		v1_w_new	= 1800;
	}

v1_w = v1_w_new;
	v1_h = v1_h - 200;
	v1_center = v1_w/0.8;

// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

var winname = 'win_' + url;

params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

// Create URL
	url = url + '?webnam=' + p1 + '&input_hub_sertyp=' + p3;

if ( p2 == 'new-tab' ) {
		overview_win = window.open(url,winname);
	} else {
		overview_win = window.open(url,winname, params);
	}

if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// Set search word
//=============================================================================
function setSearchWord( input_search, input_goto, input_button_number, input_totalPages, input_count )
{

// Set webserver type
	$('#input-HUB_SERTYP').val( input_search );

chart_bar.destroy();

processReasonData();

}

//=============================================================================
// Show transcations
//=============================================================================
function showTranscations(url, p1, p2, p3)
{

var url = 'hub_webtrn_maintain.php';
	var p1  = p1;
	var p2  = 'new-win';
	var p3  = '';

popUpCenterBig(url, p1, p2, p3);

}

//=============================================================================
// Set clock
//=============================================================================
function updateClock() {

$('#current-time').html(moment().format('DD-MM-YYYY HH:mm:ss'));

}

//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{

// Set webserver type
	$('#input-HUB_SERTYP').val( global_sertyp );

// Set size of canvas
	$('#canvas-wrapper').css('height','600px');

//-----------------------------------------------------------------------
	// Start the clock
	//-----------------------------------------------------------------------
		updateClock();
		setInterval(function() {
			updateClock();
		}, 1000);
	//-----------------------------------------------------------------------

// Set input fields
	$('#fromdate').val('<?php echo $fromDate ?>');
	$('#todate').val('<?php echo $toDate ?>');

//-----------------------------------------------------------------------
	// Set font awesome icon type
	//-----------------------------------------------------------------------
		// Value is from config/config.php
		var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
		setFontAwesomeIconType( iconType );
	//-----------------------------------------------------------------------

//-----------------------------------------------------------------------
	// Get some chart data
	//-----------------------------------------------------------------------
	processReasonData();

// Set short cuts
	shortcut.add("Esc",function() {
		window.close();
	});

// Register the plugin to all charts:
	Chart.register(ChartDataLabels);

});
// -->
</script>

</head>

<body>

<div class="row">
			<div class="col-2">
				<img src="images/customer-logo.png" class="img-fluid" alt="Customer Logo">
			</div>
			<div class="col-8 text-center <?php echo $DFT_CLOCK_SIZE ?>">
				<i title="<?php echo $session_rand ?>" class="font-awesome-pseudo-class fa-thin fa-clock"></i>&nbsp;&nbsp;<span id="current-time"><?php echo date('d-m-Y h:i:s') ?></span>
			</div>
			<div class="col-2 text-right">
				<div id="home-button" class="btn btn-primary" onclick="window.close()" title="<?php echo $visual_go_to_my_dear_home ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>
			</div>
		</div>

</div>
			</div>

<div class="row mb-2">
		<div class="col text-right">
			<button type="button" id="show-pareto-button" class="btn btn-primary mr-1"   onclick="toggleParetoVisibility(true)">Show pareto</button>
			<button type="button" id="hide-pareto-button" class="btn btn-warning mr-1"   onclick="toggleParetoVisibility(false)">Hide pareto</button>
			<button type="button" id="downloadPdf" class="btn btn-success d-none" onclick="downloadPDF()">Download PDF</button>
		</div>
		</div>

</div>

<div class="card-body" id="table-header-data">

</div>

<div class="card-body">
			<div id="data-result-trans"></div>
		</div>

</div>

<div class="col-2 div-spreder">
	</div>

</div>

<div id="error-text-wrapper" class="d-none">
	<div class="border border-danger rounded p-2 bg-light" id="error-text-ajax-call"></div>
	</div>

</div>

<span id="footer-id">
<?php
	include "include/footer.php";
?>
</span>

</body>
</html>